<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>查看快递员区域</title>

<script type="text/javascript">

	//定义地图
	var map = new BMap.Map("myMap"); // 创建Map实例
	var centerPoint = new BMap.Point(121.485966, 31.239957); //初始化地图，中心点为上海中心点
	map.centerAndZoom(centerPoint, 13); // 初始化地图,设置中心点坐标和地图级别
	var opts = {             //设置左上角控件，地图缩放类型
		type : BMAP_NAVIGATION_CONTROL_SMALL
	};
	map.addControl(new BMap.NavigationControl(opts)); //添加左上角缩放控件 
	map.enableScrollWheelZoom(); //可滚动缩放
	map.disableDoubleClickZoom(); //关闭双击放大
	
	var color ="red";  //多变性边框颜色
	var thisColor="#BB5500"; //定义当前快递员覆盖物多边形线的颜色
	var doneColor="red";
	var editAreas= new Array(); //定义数组用来存放当前快递员编辑后的区域参数
	var beforeWorkMap;
	var isLock;
	
	//右键单击事件
	 var flag=1; //多边形线的编辑状态标记，单击事件判断flag标记，如果为1，则开启线编辑，为2则关闭
	 map.addEventListener("rightclick", function(o) { 
		 if(o.overlay){
			 var ovl=o.overlay;
			 var lcolor = ovl.getStrokeColor().toString();
			 if(lcolor==thisColor){
				 isLock=false;
				  if(flag==1){
					 ovl.enableEditing();
					 flag=2;
				 }else if(flag==2){
					 ovl.disableEditing();
					 flag=1;
				 } 
			 }
		 }
	 }); 
	 
	//左键双击事件
	 map.addEventListener("dblclick", function(o) { 
		 if(o.overlay){ 
			 var ovl=o.overlay;
			 if(ovl.getStrokeColor()==thisColor){
				 alertMsg.confirm("确认锁定该区域吗！", {
						okCall: function(){
							isLock=true;
							ovl.disableEditing();
							ovl.setStrokeColor(doneColor); //设置多边形颜色
							editAreas.push(ovl.getPath());
						}
				});
			 }
		 }
	 });
	 
	 
	 
	//右键双击事件
	 map.addEventListener("rightdblclick", function(o) { 
		 if(o.overlay){ 
			 var ovl=o.overlay;
			 if(ovl.getStrokeColor()==thisColor){  //通过边框颜色区分该区域是否当前快递员，等于说明是当前快递员，并且颜色不能是锁定后的边框颜色
				 alertMsg.confirm("确认删除该区域吗！", {
						okCall: function(){
							isLock=true;
							map.removeOverlay(o.overlay);
						}
				});
			 }
		 }
	 });
	
	
	 /**
	 * 删除当前覆盖物
	 */
	function deleteOverLay(o){
		map.removeOverlay(o);
	}
	
	 /**
	 * 编辑当前覆盖物
	 */
	function editOverLay(o){
		o.enableEditing();
	}
	
	
	


	/**
	 * 获取区域的数据
	 */
	$(function(){
		$.ajax({
			type : 'post',
			url :'<%=basePath%>getAreaMapAreasAction',
			success : function(data) {
				initMapAreas(data);
			}
		});
	});

	/**
	 * 根据返回的data加载地图区域
	 */
	function initMapAreas(Areadata) {
		var thisAreaId = <%=request.getAttribute("supportID")%>;
		var json = JSON.parse(Areadata);
		var selectView = null;
		for(var i=0;i<json.length;i++){ //循环每一个快递员
			var viewA = JSON.parse(json[i].areaMap);
			var thisId = json[i].id;
			if(thisId==thisAreaId){
				/* color = thisColor;  //当前快递员的区域边框颜色
				if(""!=viewA){
					var panPoint=new BMap.Point(viewA[0][0].lng,viewA[0][0].lat); 
					map.panTo(panPoint); //获取当前快递员第一个区域第一个点，地图中心平移到该点
				} */
				beforeWorkMap=json[i].areaMap;
				selectView=viewA;
				$("#update_areaName_areaMap").val(json[i].areaName);
			}else{
				color = "blue"; //其他快递员的区域边框颜色
			}
			viewTheseAreas(viewA,map,color);
		}
		if(selectView!=null&&""!=selectView)
		{
			color = "#BB5500";  //当前快递员的区域边框颜色
			var panPoint=new BMap.Point(selectView[0][0].lng,selectView[0][0].lat); 
			map.panTo(panPoint); //获取当前快递员第一个区域第一个点，地图中心平移到该点
			viewTheseAreas(selectView,map,color);
		}
	}
	
	
	//显示当前的区域
	function viewTheseAreas(pointsData,map,color) {
		for (var i = 0; i < pointsData.length; i++) { //循环每一个区域
			var viewPoint; //定义显示的点坐标
			var viewPointsArr = new Array(); //定义存放点的数组，数组用于给
			for (var j = 0; j < pointsData[i].length; j++) {//每一个区域的点坐标拿到放在数组viewPointsArr里面
				var lng = pointsData[i][j].lng;
				var lat = pointsData[i][j].lat;
				viewPoint = new BMap.Point(lng, lat);
				viewPointsArr.push(viewPoint);
			}
			var viewPloygon; //定义显示的多边形
			viewPloygon = new BMap.Polygon(viewPointsArr);
			viewPloygon.setStrokeWeight(3);
			viewPloygon.setStrokeColor(color); //设置多边形颜色
			viewPloygon.setFillOpacity(0.2); 
			map.addOverlay(viewPloygon);
			viewPloygon.disableMassClear(); //删除全部覆盖物时不被删除
			viewPointsArr.length = 0;
		}
	} 
	
	
	/**
	 *  把一个点转换为JSON字符串形式
	 *  {lng:123.45,lat:23.6533}
	 */
	function pointToJsonStr(obj) {
		var pstr = '';
		pstr = '{' + '"lng":' + obj.lng + ',"lat":' + obj.lat + '}';
		return pstr;
	}

	/**
	 *  把多个点，即一个区域
	 *  (参数为一个数组，数组的每一个元素为一个点)
	 *  转换为JSON对象数组字符串形式
	 *  [{lng:123.45,lat:23.6533},{....},{.....}]
	 */
	function pointArrayToJsonStr(arrObj) {
		var astr = '[';
		for (var i = 0; i < arrObj.length; i++) { //循环每一个点
			if (i != 0) {
				astr += ',';
			}
			var pstr = pointToJsonStr(arrObj[i]);
			astr += pstr;
		}
		astr += ']';
		return astr;
	}

	/**
	 *  把多个区域组成一个JSON数组A
	 *  参数为前面定义的areas
	 *  每一个A的元素为一个嵌套在A中的数组B，B即为一个区域
	 *  [  [{lng:123.45,lat:23.6533},{....},{.....}]  ,  [{lng:123.45,lat:23.6533},{....},{.....}]  ]
	 */
	function AreaArrayToJsonStr() {
		var areaArrObj = editAreas;  //全局变量editAreas的值
		var asstr = '[';
		for (var i = 0; i < areaArrObj.length; i++) {
			if (i != 0) {
				asstr += ',';
			}
			var astr = pointArrayToJsonStr(areaArrObj[i]);
			asstr += astr;
		}
		asstr += ']';
		return asstr;
	}

	/**
	 * 确认添加这些区域
	 * 参数为为areas
	 * 获取新添加的区域，格式为JSON数组嵌套的字符串格式
	 */
	function addTheseAreas() {
		var jsonStr="";
		if(isLock)
		{
		    jsonStr = AreaArrayToJsonStr();
		}else
		{
			jsonStr=beforeWorkMap;
		}
		$("#updateAreaMap_hidden_mapjson").val(jsonStr);
	}
	
	
	/**
	* 自定义回调函数
	*/
	function ensureValidateCallback(obj,navTabAjaxDone){
		alertMsg.confirm("确认已经锁定要保存的所有区域！", {
			okCall: function(){
				addTheseAreas();
				return validateCallback(obj, navTabAjaxDone);
			}
		});
		return false;
	}
	
</script>

</head>
<body>
	<div class="pageContent">
		<form class="pageForm required-validate" method="post" action="updateAreaMapAction.action" onsubmit="return ensureValidateCallback(this, navTabAjaxDone);">
			<input type="hidden" name="rightId" value="${rightId}" />
			<input type="hidden" name="id" value="${supportID}" />
			<input id="updateAreaMap_hidden_mapjson" name="areaMap" type="hidden">
			<div class="pageFormContent" layoutH="86">

				<div id="myMap" style="width: 900px; height: 550px;"></div>


			</div>
			<div class="formBar">
				<ul>
					<li>
						<div class="buttonActive">
							<div class="buttonContent">
								<span>区域名称： </span>
								<input type="text" name="areaName" id="update_areaName_areaMap" class="required textInput valid">
								<button type="submit">保存</button>
							</div>
						</div>
					</li>
					<li>
						<div class="button">
							<div class="buttonContent">
								<button type="button" class="close">取消</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</form>
	</div>
</body>
</html>